<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/css.css" rel="stylesheet" type="text/css">
<script src="js/jquery-2.1.1.min.js"></script>

    <!--自定义工具-->
    <script src="js/HttpUtil.js"></script>
    <!--参数校验工具-->
    <script src="validation-1.19.2/jquery.validate.min.js"></script>
    <script src="validation-1.19.2/localization/messages_zh.min.js"></script>
<style>
.tab {
	overflow: hidden;
	margin-top: 20px; margin-bottom:-1px;
}
.tab li {
	display: block;
	float: left;
	width: 100px;padding:10px 20px; cursor:pointer; border:1px solid #ccc; 
}
.tab li.on {
	background: #90B831; color:#FFF;padding:10px 20px;
}
.conlist {padding:30px; border:1px solid #ccc; width:300px;}
.conbox {
	display: none;
}
</style>
<script>
$(function(){
	$(".tab li").each(function(i){
		$(this).click(function(){
		$(this).addClass("on").siblings().removeClass("on");
		$(".conlist .conbox").eq(i).show().siblings().hide();
		})
	})
})
</script>
</head>

<body class="l-bg">
<div class="login-top">
    <div class="wrapper">
        <div class="fl font30">LOGO</div>
        <div class="fr">您好，欢迎为生活充电在线！</div>
    </div>
</div>
<div class="l_main2">
    <div class="l_bttitle"> 
        <h2>注册</h2>
    </div>
    <div class="loginbox" style="position: relative; top: -50px; left: -20px ;width: 500px">
        <div class="tab">
            <ul>
                <li class="on">我是买家</li>
                <li>我是卖家</li>
            </ul>
        </div>
        <div class="conlist" style="width: 360px">
            <div class="conbox" style="display:block;">
                <form id="register_submit">
                    <p>
                    <div class="fl res-text">用户名：</div><div><input type="text" class="loginuser" name="userName" id="userName"></div>
                    </p>
                    <p>
                    <div class="fl res-text">密码：</div><div><input type="password" class="loginuser" name="password" id="password"></div>
                    </p>
                    <p>
                    <div class="fl res-text">邮箱：</div><div><input type="email" class="loginuser" name="email" id="email"></div>
                    </p>
                    <p>
                    <div class="fl res-text">验证码：</div>
                    <div class="fl" style="margin-left: 16px"><input type="password" class="loginuser2" name="uCode" id="uCode"></div>
                    <div class="fl same-code" onclick="getCode()">获取验证码</div>
                    <!--<div class="fl same-code2">60秒后重新获取</div>-->
                    </p>
                    <p>
                        <input type="button" class="loginbtn" value="注 册" onclick="register(0)">
                    </p>
                </form>
            </div>
            <div class="conbox">
                <form id="register_submit2">
                    <p>
                    <div class="fl res-text">用户名：</div><div><input type="text" class="loginuser" name="userName1" id="userName1"></div>
                    </p>
                    <p>
                    <div class="fl res-text">密码：</div><div><input type="password" class="loginuser" name="password1" id="password1"></div>
                    </p>
                    <p>
                    <div class="fl res-text">邮箱：</div><div><input type="email" class="loginuser" name="email1" id="email1"></div>
                    </p>
                    <p>
                    <div class="fl res-text">验证码：</div>
                    <div class="fl" style="margin-left: 16px"><input type="password" class="loginuser2" name="uCode" id="uCode1"></div>
                    <div class="fl same-code" onclick="getCode()">获取验证码</div>
                    <!--<div class="fl same-code2">60秒后重新获取</div>-->
                    </p>
                    <p>
                        <input type="button" class="loginbtn" value="注 册" onclick="register1(1)">
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script>
    $(function () {
        init();
    });
    function init() {
        //加载参数校验工具
        $("#register_submit").validate(
            {
                rules: {
                    userName: {required: true},
                    password: {required: true},
                    email:{required: true}
                },
                messages: {
                    userName: {
                        required: "小哥哥，这个是必填哦！",
                    }
                }
            }
        );
    }

    function getCode() {
        //获取验证框架结果
        let validateResult = $("#register_submit").valid();
        if (validateResult) {
            //获取邮箱
            let userEmail = $("#email").val();
            //发起http 请求
            let url = "/login/email.do";
            let params = {"userEmail":userEmail};
            postWithParams(url, params, function (uData) {
                SetCookie("code",uData,3)//设置三分钟有效
            });
        }
    }

    function register(type) {
        //获取输入验证码
        var uCode = $("#uCode").val();
        //获取后台验证码
        var cookie = getCookie("code");//获取cookie
        if (cookie.toLowerCase()===uCode.toLowerCase()){//验证码正确
            //获取邮箱
            let userEmail = $("#email").val();
            //获取邮箱
            let userName = $("#userName").val();
            //获取邮箱
            let password = $("#password").val();

            //发起http 请求
            let url = "/login/register.do";
            //params对象
            let params = {userName: userName, password: password,email:userEmail,type: type};
            postWithParams(url, params, function (data) {
                location.href="index.html";
                //添加cookie一天内下次自动登录
                var json = JSON.stringify(data);
                SetCookie("userMassage",json,24*60)//设置一天有效
            })
        }else{
            alert("验证码错误！")
            window.location.reload();//刷新页面
        }
    }

    function register1(type1) {
        //获取输入验证码
        var uCode = $("#uCode1").val();
        //获取后台验证码
        var cookie = getCookie("code");//获取cookie
        if (cookie.toLowerCase()===uCode.toLowerCase()){//验证码正确
            //获取邮箱
            let userEmail1 = $("#email1").val();
            //获取邮箱
            let userName1 = $("#userName1").val();
            //获取邮箱
            let password1 = $("#password1").val();

            //发起http 请求
            let url = "/login/register.do";
            //params对象
            let params = {userName: userName1, password: password1,email:userEmail1,type: type1};
            postWithParams(url, params, function (data) {
                location.href="店铺专区.html";
                //添加cookie一天内下次自动登录
                var json = JSON.stringify(data);
                SetCookie("userMassage",json,24*60)//设置一天有效
            })
        }else{
            alert("验证码错误！")
            window.location.reload();//刷新页面
        }
    }


</script>